<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>键盘事件</title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<!-- 
		1.Vue中常用的按键别名
		 回车 => enter
		 删除 => delete (捕获"删除"和"退格"键)
		 退出 => esc
		 空格 => space
		 换行 => tab (特殊,必须配合keydown使用)
		 上 => up
		 下 => down
		 左 => left
		 右 => right
		 2.Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短线命名)
		 3.系统修饰键(用法特殊):ctrl、alt、shift、meta
		 (1).配合keyup使用:按下修饰键的同时,再按下其他键，随后释放其他键，事件才被触发
		 (2).配合keydown使用,正常触发事件
		 4.也可以使用keyCode去指定具体的按键(B不推荐)
		 -->
		<div id="root">
			<h3>欢迎来到{{name}}</h3>
			<input type="text" placeholder="按下回车提示出入" @keydown.tab="showInfo" />
		</div>
		<script>
			const vm = new Vue({
				el:'#root',
				data:{
					name:'xxx'
				},
				methods:{
					showInfo(e){
						console.log(e.key,e.keyCode);
					}
				}
			});
		</script>
	</body>
</html>